<!-- components/i-icon -->
<template>
	<view :class="[icon, type === 'single' ? 'iconfont font' : 'c-icon width']" :style="[style]"></view>
</template>

<script>
export default {
  name: 'i-icon',
  props: {
    icon: {
      type: String,
      required: true
    },

    // 图标颜色类型，'single'为单色图标, 'multiple'为多色图标
    type: {
      type: String,
      default: 'single'
    },

    // 图标大小，单位rpx
    size: {
      type: String,
      default: '32rpx'
    },

    // 只支持单色图标更改颜色
    color: {
      type: String,
      default: '',
      required: false
    }
  },

  // data() {
  //   return {
  //     iconType: ['single', 'multiple'],  // 图标颜色类型，'single'为单色图标, 'multiple'为多色图标
  //   }
  // },

  computed: {
    // 通过传入的size属性，定义图标大小样式
    style() {
      let fontSize = {
        'font-size': this.size,
        'line-height': this.size
      }
      // 如果传了color属性，就将其加到单色图标样式里面
      if (this.color) {
        fontSize.color = this.color
      }

      let width = {
        width: this.size,
        height: this.size
      }
      let result = this.type === 'single' ? fontSize : width

      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
	display: inline-block;
}

// 单色图标通过font-size定义大小
.font {
  font-size: 32rpx;
}

// 多色图标通过宽高定义大小
.width {
  width: 52rpx;
  height: 52rpx;
}
</style>